<template>
<div class="cc">
    <h1>Computed计算属性</h1>
    <p>计算属性是根据其他数据的动态计算值,能够自动更新</p>
    <h2>购物车(使用计算属性)</h2>
    <label>单价</label>
    <input type="number" v-model="price" />

    <label>数量</label>
    <input type="number" v-model="quantity" />

    <p>单价:{{ price }}</p>
    <p>数量:{{ quantity }}</p>
    <p>总价:{{ total }}</p>
</div>
</template>

<script setup>
import {ref,computed} from 'vue'

const price=ref(0) //单价
const quantity = ref(0) //数量

// 总价用computed计算属性获取(total 本身就是 单价跟数量的乘)
const total = computed(() => {
    return price.value * quantity.value + 2
}

)

</script>

<style scoped>
.cc{
    background-color: rgb(203, 220, 245);
    border-radius:15px;
    padding:20px;
}
</style>